<template>
    <div class="link-bottom-group">
        <router-link to="/" v-if="props.home" class="home">首页</router-link>
        <router-link v-for="(item, index) in props.menusList" :to="item.path" :key="index"><span>{{ item.title }}</span>
        </router-link>
    </div>
</template>
<script setup>
const props =defineProps({
    menusList:{
        type:Array,
        default:()=>[]
    },
    home:{
        type:Boolean,
        default:true
    }
});
</script>
<style scoped>
.link-bottom--space,
.link-bottom-group {
    height: 50px;
}

.link-bottom-group {
    color: white;
    background: #798ea7;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    z-index: 99;
}

.link-bottom-group a {
    color: white;
    font-size: 18px;
    /* padding: 0 10px; */
    flex: 1;
    text-align: center;
    position: relative;
    border-right: 1px solid;
    height: 100%;
    display: flex;
    justify-content: center;
    /* align-content: center; */
    align-items: center;
}

.link-bottom-group span {
    position: relative;
}

.link-bottom-group a:nth-last-child(1) {
    border: 0;
}

.link-bottom-group a.router-link-exact-active.router-link-active {
    background: #97afc5;
}
</style>